
import Echarts from '@/components/Echarts'
import style from './chart.module.scss'
import { useEffect, useState } from 'react'
import { queryArticleCountByMonth } from '@/api/statistics';
import { renderArticleTrend } from '../utils/renderArticleTrend';
export default function ArticleCountTrend() {
  const [chartOptions,setChartOptions] = useState<Record<string,unknown>>()
  /**
 * 获取文章每月数量
 */
const getArticleTrend = async () => {
  const res = await queryArticleCountByMonth();
  if (res.code === 200) {
    const list = res.data || [];
    const month = [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "11",
      "12",
    ];
    const yAxis = month.map((item) => {
      const obj = list.find((el) => el.time === item);
      return obj ? Number(obj.count) : 0;
    });
    const xAxis = month.map(item=>item+'月')
    setChartOptions(renderArticleTrend(xAxis, yAxis))
  
  }
};
useEffect(()=>{
  getArticleTrend()
},[])
  return (
    <div className={style['block-chart__box']}>
    <div className={`${style['block__wrap']} float__block--g`}>
      <div className={style['block__title']}>今年各月文章创作数</div>
      <div className={style['block__box']}>
        {chartOptions&&<Echarts  options={chartOptions} />}
      </div>
    </div>
  </div>
  )
}
